<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>班级显示</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
	<h3 align="center">班级查询</h3>
	<a href="#" id="addbut" class="layui-btn layui-btn-sm"><i class="layui-icon"></i>去新加</a>
	<div>
		<span th:text="${msg}"></span><span th:text="${param.msg}"></span>
	</div>
	<form action="claquery" method="post" id="queryform">
	<table border="1" width="100%" class="layui-table"  lay-filter="querytab" lay-even>
		<thead>
			<tr>
				<th lay-data="{field:'count',width:60}">序号</th>
				<th lay-data="{field:'cid',sort:true}">班级编号</th>
				<th lay-data="{field:'cname'}">班级名</th>
				<th lay-data="{field:'operator'}">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="c,st:${p.list}">
				<td th:text="${st.count}"></td>
				<td th:text="${c.cid}"></td>
				<td th:text="${c.cname}"></td>
				<td>
					<a th:href="|cladel?cid=${c.cid}|" onclick="return confirm('你确定删除吗？')" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon"></i>删除</a>
					<a  class="layui-btn layui-btn-sm editcla" lay-event="edit"><i class="layui-icon" ></i>编辑</a>
				</td>
			</tr>
		</tbody>
	</table>
		<div th:replace="pagination::pagination"></div>
	</form>
	<!-- 新加的层 -->
	<div id="addformdiv" style="display:none">
		<form id="addmodform" class="layui-form" action="claadd" method="post">
			<div class="layui-form-item">
				<label class="layui-form-label">班级编号</label>
				<div class="layui-input-block">
					<input type="text" name="cid"
						placeholder="自动增长" readonly="readonly" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">班级名</label>
				<div class="layui-input-block">
					<input type="text" id="cname" name="cname" required lay-verify="required" minlength="2"
						placeholder="输入班级名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 新加的层结束 -->
	
	<script type="text/javascript">
		layui.use(['table','layer','form'],function(){
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;
			var $ = layui.jquery;
			//绑定新加按钮事件
			$("#addbut").click(function(){
				$("#addmodform").prop("action","claadd");
				$("#addmodform")[0].reset();
				layer.open({
					type:1,
					title:'班级新加',
					content:$("#addformdiv"),
					area:['600px','500px']
				})
			});
			table.init('querytab',{});
			table.on("tool(querytab)",function(obj){
				if(obj.event=='edit'){//编辑事件
					var cid = obj.data.cid;
					var cname = obj.data.cname;
					$("input[name='cid']").val(cid);
					$("#cname").val(cname);
					form.render();
					$("#addmodform").prop("action","clamod")
					layer.open({
						type:1,
						title:'班级修改',
						content:$("#addformdiv"),
						area:['600px','500px'],
					})
				}
				
			})
			//设置分页按钮的事件
			$("#pagediv button").click(function(){
				//取title的值
				var title = $(this).prop("title");
				//设置为当前页
				$("input[name='pageNum']").val(title);
			});
			//设置分页值改变事件
			$("input[name='pageNum']").change(function(){
				$("#queryform")[0].submit();
			})
			//设置每页显示记录数事件
			$("select[name='pageSize']").change(function(){
				$("#queryform")[0].submit();
			});
		})
	</script>
</body>
</html>